<template>
    <div class="">
        <!--面包屑-->
        <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item>
            <el-breadcrumb-item>${classNameLower}</el-breadcrumb-item>
        </el-breadcrumb>
        <!--查询表单-->
        <el-form :inline="true" :model="searchParam" class="ui-demo-form-inline">
            <el-form-item label="开始时间">
                <el-date-picker v-model="searchParam.startTime" type="date" placeholder="开始时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
                <el-date-picker v-model="searchParam.endTime" type="date" placeholder="结束时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchBtn" icon="search"></el-button>
                <!--添加按钮-->
                <el-button class="add" type="primary" icon="plus" @click="add_dialog = true">添加</el-button>
            </el-form-item>
        </el-form>
        <!--表格-->
        <el-table @sort-change="sortHandler" class="mytabel" :data="tableData" v-loading="loading" :default-sort="{}">
            <#list colList as col>
                <el-table-column prop="${col.columnName}" label="${col.remarks}" width=""></el-table-column>
            </#list>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="watchBtn(scope.row)" type="text" size="small">查看</el-button>
                    <el-button @click="editBtn(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="delBtn(scope)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination class="ui-cpagina" small @current-change="pageChange" :current-page="pagination.curPage" :page-size="pagination.pageSize" layout="total,prev,pager,next,jumper" :total="pagination.total">
        </el-pagination>
        <!--弹出框-->
        <el-dialog title="添加" :visible.sync="add_dialog" close-on-press-escape :modal="true"  @close="add_close_dialog">
            <el-form :model="form" label-width="80px">
                <#list colList as col>
                    <el-form-item label="${col.remarks}" :label-width="formLabelWidth">
                        <el-input v-model="form.${col.columnName}" auto-complete="off"></el-input>
                    </el-form-item>
                </#list>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="add_dialog = false">取 消</el-button>
                <el-button type="primary" @click="addBtn">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="修改" :visible.sync="update_dialog" close-on-press-escape :modal="true"  @close="update_close_dialog">
            <el-form :model="form" label-width="80px">
            <#list colList as col>
                <el-form-item label="${col.remarks}" :label-width="formLabelWidth">
                    <el-input v-model="form.${col.columnName}" auto-complete="off"></el-input>
                </el-form-item>
            </#list>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="update_dialog = false">取 消</el-button>
                <el-button type="primary" @click="editSubmit">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="详情" :visible.sync="detail_dialog" close-on-press-escape :modal="true"  @close="detail_dialog = false ">
            <el-form :model="form" label-width="80px">
            <#list colList as col>
                <el-form-item label="${col.remarks}" :label-width="formLabelWidth">
                    <el-input v-model="form.${col.columnName}" auto-complete="off"></el-input>
                </el-form-item>
            </#list>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    export default {
            name: '${classNameLower}',
            mounted() {
                this.$nextTick(() => {
                    this.link2Page(1);
                 });
            },
            data() {
                return {
                    pagination: {
                        total: 0,
                        pagesize: 0,
                        curPage: 1
                    },
                    searchParam: {
                        order: 'DESC',
                        startTime: '',
                        endTime: '',
                        curPage: 1
                    },
                    title: '',
                    add_dialog: false,
                    update_dialog: false,
                    detail_dialog: false,
                    loading: false,
                    tableData:[],
                    form: {
                    <#list colList as col>
                        <#if col_has_next>
                        ${col.columnName}:null,
                        <#else>
                        ${col.columnName}:null
                        </#if>
                    </#list>
                    }
                }
            },
            methods: {
                link2Page(curPage) {
                        this.searchParam.curPage = curPage;
                        this.$http.post('api/${classNameLower}/list', this.searchParam, {
                            emulateJSON: true
                        }).then((res) => {
                            this.tableData = res.data.result.content;
                            this.pagination.total = res.data.result.total;
                            this.pagination.pageSize = res.data.result.helper.pageSize;
                            this.pagination.curPage = res.data.result.helper.curPage;
                            this.loading = false;
                        }).catch((err) => {
                            this.loading = false;
                            console.log(err)
                    });
                 },
                addBtn() {
                        this.$http.post("api/${classNameLower}/add",this.form,{emulateJSON: true})
                                .then((data)=>{
                                    if(data.success){
                                        this.$message({ type: 'info', message: '添加成功'});
                                    }else{
                                        this.$message({ type: 'info', message: '添加失败'});
                                    }
                                     this.add_dialog = false;
                            }).catch((err)=>{
                                this.add_dialog = false;
                            });
                },
                watchBtn(row) {
                    this.detail_dialog = true;
                    Object.assign(this.formData, row);
                },
                editBtn(row) {
                    this.update_dialog = true;
                    Object.assign(this.formData, row);
                },
                editSubmit(){
                     this.$http.post("api/${classNameLower}/update",this.form,{emulateJSON: true})
                                .then((data)=>{
                            if(data.success){
                                this.$message({ type: 'info', message: '修改成功'});
                            }else{
                                this.$message({ type: 'info', message: '修改失败'});
                            }
                          this.update_dialog = false;
                    }).catch((err)=>{
                          this.update_dialog = false;
                    });
                },
                delBtn(scope) {
                    this.$confirm('是否删除?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$http.post("api/${classNameLower}/del/"+scope.row.id,this.form,{emulateJSON: true})
                            .then((data)=>{
                                if(data.success){
                                    this.$message({ type: 'info', message: '删除成功'});
                                }else{
                                    this.$message({type: 'info',message: '删除失败'});
                                }
                            }).catch((err)=>{
                                this.$message({ type: 'info', message: '删除失败'});
                            });
                    }).catch(() => {
                        this.$message({type: 'info',message: '已取消删除'});
                    });
                },
                pageChange(val) {
                    this.link2Page(val)
                },
                sortHandler(column) {
                    this.searchParam.order = column.order.split("ending")[0]
                    //let field = this.fieldFormatter(column.prop) 格式化字段
                    this.link2Page(1)
                },
                searchBtn() {
                    this.searchParam.startTime = (!!this.searchParam.startTime) ? new Date(this.searchParam.startTime).format("yyyy-MM-dd") : '';
                    this.searchParam.endTime = (!!this.searchParam.endTime) ? new Date(this.searchParam.endTime).format("yyyy-MM-dd") : '';
                    this.link2Page(1)
                }
        }
    }
</script>